<template>
	<div class="custom_top_ad fadeInDown animated" v-if="isShow">
		<div class="custom_component"><component :is="component"></component></div>
		<a @click="oncShowHandle($event)" class="custom_component_close"><i class="icon--7"></i></a>
		<span class="ad">广告</span>
	</div>
</template>

<script>
	export default {
		name:"CustomTopAd",
		props:["component"],
		data:function(){
			return {
				isShow:false,
				oncShow: false
			}
		},
		mounted: function(){
			window.scrollTo(1,1);
			let that = this;
			that.throttleload = throttle(() => {
				that._scrollHandler()
			}, 100);
			window.addEventListener('scroll', that.throttleload);
		},
		destroyed: function(){
			let that = this;
			window.removeEventListener('scroll', that.throttleload);
		},
		methods:{
			oncShowHandle(e){
				this.$set(this, "isShow", false);
				this.$set(this, "oncShow", true);
			},
			_scrollHandler:function(){
				let top = getScrollTop();
				if (top > 100){
					!this.oncShow && this.$set(this, "isShow", true);
				}else{
					this.$set(this, "isShow", false);
				}
			}
		}
	}
</script>

<style lang="less">
	@base:23.44/1rem;
	.custom_top_ad{
		position:fixed;
		top:0;
		left:0;
		right:0;
		background-color: rgba(0,0,0,.8);
		color:#fff;
		height:120/@base;
		z-index:100;
		span{
			&.ad{
				position:absolute;
				bottom:0;
				left:0;
				font-size: 12/@base;
				background-color: rgba(255,255,255,.5);
				z-index: 99;
				padding:0 5/@base;
				color:#000;
			}
		}
		div{
			&.custom_component{
				
			}
		}
		a{
			&.custom_component_close{
				position:absolute;
				top:0;
				right:0;
				width:60/@base;
				height:120/@base;
				display:block;
				line-height: 120/@base;
				text-align: center;
				font-size:12/@base;
			}
		}
	}
</style>
